<template>
	<view class="content">
    <template v-if="commodityData">
      <view class="banner1">
        <swiper class="swiper" circular :indicator-dots="true" :autoplay="false" @change="changeSwiper">
          <swiper-item v-for="list,index of commodityData.images" :key="index">
            <video v-if="list.includes('mp4')" controls="controls" style="width: 100%;height: 100%;" :src="list"></video>
            <image v-else class="bannerImages1" :src="list" />
          </swiper-item>
        </swiper>
        <!-- <image class="bannerImages1" :src="commodityData.logo" mode="widthFix" style="width: 100%;"></image> -->
        <view v-if="!commodityData.images[this.currentIndex].includes('mp4')" class="tips_info">
          <image src="@/static/detailTopBg.png" class="bg"></image>
          <view class="text">
            <view class="oldPrice">¥{{ commodityData.market_price }}</view>
            <view class="price"><text class="symbol">¥</text>{{ commodityData.discount_price }}</view>
            <view v-if="commodityData.is_pre==1" class="openTime">预售倒计时 {{ formatDate(commodityData.end_time) }}</view>
            <view v-if="commodityData.is_pre==0" class="openTime">开团时间 {{ formatDate(commodityData.put_time) }}</view>
            <view class="residueNum">剩余数量 {{ commodityData.stock }}</view>
            <!-- <view class="openTime">开团时间 {{ currentTime }}</view>
            <view class="residueNum">剩余数量 {{ commodityData.total_stock }}</view> -->
          </view>
        </view>
      </view>
      <view class="detailTop">
        <view class="price">
          <view class="ico">¥</view>
          <view>{{ commodityData.discount_price }}</view>
          <view class="group">原价¥{{ commodityData.market_price }}</view>
        </view>
        <view class="desc">已售{{ commodityData.virtual_sales }}+</view>
      </view>
      <view class="name">{{ commodityData.title }}</view>
      <view class="addressBox">
        <view class="freight">中国{{ commodityData.region }} | 快递：{{ Number(commodityData.express) == 0 ? '免运费' : commodityData.express}}</view>
        <view class="checkSize" @click="skuClick()">
          <image class="checkImage" src="@/static/other/icoMore1.png" style="width: 26rpx;height:26rpx;"></image>
          <template v-if="commodityData.sku && commodityData.sku.image.length>0">
            <image v-for="img,imgIndex of commodityData.sku.image" :key="imgIndex+'imgIndex'" class="checkImage" :src="img" style="width: 64rpx;height:64rpx;"></image>
          </template>
          <template v-if="commodityData.sku && commodityData.sku.values.length>0">
            <view class="checkText">请选择: 
              {{ commodityData.sku.values.join(' / ') }}
            </view>
          </template>
          <ico class="rightImage rightIco" />
        </view>
      </view>
      <view v-if="commodityData.param && commodityData.param.content.length>0" class="parameterBox" @click="checkSizeClick()">
        <ico class="rightImage rightIco" />
        <template v-for="(list,index) of commodityData.param.content" :key="index">
          <view v-if="index<=3"  class="list">
            <image v-if="index==0" class="checkImage" src="@/static/other/icoMore2.png" style="width: 24rpx;height:24rpx;"></image>
            <image v-if="index==1" class="checkImage" src="@/static/other/icoMore3.png" style="width: 24rpx;height:24rpx;"></image>
            <image v-if="index==2" class="checkImage" src="@/static/other/icoMore4.png" style="width: 24rpx;height:24rpx;"></image>
            <image v-if="index==3" class="checkImage" src="@/static/other/icoMore5.png" style="width: 24rpx;height:24rpx;"></image>
            <view class="type">{{ list.value }}</view>
            <view class="name">{{ list.key }}</view>
          </view>
        </template>
      </view>
      <view class="moreTab">
        <view class="tab" :class="moreTabActive===1?'active':''" @click="moreTabActive=1;moreTabActiveFun()">商品详情</view>
        <view class="tab" :class="moreTabActive===2?'active':''" @click="moreTabActive=2;moreTabActiveFun()">商品实拍</view>
        <view class="tab" :class="moreTabActive===3?'active':''" @click="moreTabActive=3;moreTabActiveFun()">资质授权</view>
        <view class="tab" :class="moreTabActive===4?'active':''" @click="moreTabActive=4;moreTabActiveFun()">关于售后</view>
      </view>
      <view class="moreCont">
        <view v-for="list,index of commodityInfoData" :key="index" class="list">
          <text v-if="list.title" class="title">{{ list.title }}</text>
          <view v-if="moreTabActive===1" class="viewtopImage">
            <text class="timeText">{{ commodityData.put_time_image }}</text>
            <image class="checkImage" src="@/static/detailsTop.png" mode="widthFix"></image>
          </view>
          <template v-for="images,j in list.files">
            <video v-if="images.includes('mp4')" :key="j" class="checkVideo" :src="images"></video>
            <image v-else class="checkImage" :src="images" mode="widthFix"></image>
          </template>
        </view>
      </view>
      <view class="shareButBox">
        <button class="shareBut" @click="shareClickFun()">分享好友</button>
      </view>
    </template>
    <!-- sku弹出层 -->
    <uni-popup ref="checkSizePopup" type="bottom" :safe-area="false">
      <!-- 弹出层内容 -->
      <view class="checkSizePopup-content">
        <view v-if="getStockNumData" class="price">
          <view class="ico">¥</view>
          <view>{{ getStockNumData.money }}</view>
          <view class="group">原价¥{{ getStockNumData.price }}</view>
        </view>
        <template v-if="goodsSkuData">
          <view v-for="list,index of goodsSkuData" :key="index" class="colorType">
            <view class="title">{{ list.title }}</view>
            <view class="listType">
              <view v-for="sub,j of list.values" :key="j+'sub'" class="list" :class="sub == list.checkValue?'active':''" @click="skuListClick(sub,index)">
                <image v-if="list.image[j]" class="checkImage" :src="list.image[j]"></image>
                <view class="name">{{ sub }}</view>
              </view>
            </view>
          </view>
        </template>
        <!-- <view class="colorType sizeType">
          <view class="title">尺码</view>
          <view class="listType">
            <view class="list active">
              <text>S</text>
            </view>
            <view class="list">
              <text>M</text>
            </view>
            <view class="list">
              <text>L</text>
            </view>
            <view class="list">
              <text>XL</text>
            </view>
          </view>
        </view> -->
        <view v-if="getStockNumData" class="downText">
          <view class="text">数量<text v-if="getStockNumData.stock>0">有货</text><text v-else>无货</text></view>
          <view v-if="getStockNumData.stock>0" class="number">{{ getStockNumData.stock }}</view>
        </view>
        <!-- 关闭按钮 -->
        <button class="closedBut" @click="closedFun()">完成</button>
      </view>
    </uni-popup>
    <!-- 参数弹出层 -->
    <uni-popup ref="contentPopup" type="bottom" :safe-area="false">
      <view class="contentTitle">产品参数</view>
      <!-- 弹出层内容 -->
      <view v-if="commodityData.param" class="contentPopup-content">
        <view class="parameterBox">
          <template v-for="(list,index) of commodityData.param.content" :key="index">
            <view v-if="index<=3"  class="list">
              <image v-if="index==0" class="checkImage" src="@/static/other/icoMore2.png" style="width: 24rpx;height:24rpx;"></image>
              <image v-if="index==1" class="checkImage" src="@/static/other/icoMore3.png" style="width: 24rpx;height:24rpx;"></image>
              <image v-if="index==2" class="checkImage" src="@/static/other/icoMore4.png" style="width: 24rpx;height:24rpx;"></image>
              <image v-if="index==3" class="checkImage" src="@/static/other/icoMore5.png" style="width: 24rpx;height:24rpx;"></image>
              <view class="type">{{ list.value }}</view>
              <view class="name">{{ list.key }}</view>
            </view>
          </template>
        </view>
        <view class="contentKeyValue">
          <template v-for="(list,index) of commodityData.param.content" :key="index">
            <view v-if="index>4"  class="list">
              <view class="type">{{ list.value }}</view>
              <view class="name">{{ list.key }}</view>
            </view>
          </template>
        </view>
        <!-- 关闭按钮 -->
        <button class="closedBut" @click="closedFun()">完成</button>
      </view>
    </uni-popup>
    <!-- 分享弹出层 -->
    <uni-popup ref="sharePopup" type="bottom" :safe-area="false">
      <view class="sharePopup-content">
        <view class="listBut">
          <image class="checkImage" src="@/static/wxImage.png" style="width: 80rpx;height:80rpx;"></image>
          <text class="name">分享给微信好友</text>
          <button open-type="share" class="wx_shareBut">小程序分享</button>
        </view>
        <view class="listBut" @click="shareMoreFun()">
          <image class="checkImage" src="@/static/wxImage2.png" style="width: 80rpx;height:80rpx;"></image>
          <text class="name">获取分享图片</text>
        </view>
        <view class="listBut" @click="downImagesFun()">
          <image class="checkImage" src="@/static/wxImage3.png" style="width: 80rpx;height:80rpx;"></image>
          <text class="name">下载团品素材</text>
        </view>
      </view>
    </uni-popup>
    <!-- 分享详情弹出层 -->
    <uni-popup ref="shareMorePopup" type="center" :safe-area="false">
      <!-- <view class="shareMorePopup-content">
        <view id="viewToCapture" class="your-content">
          <image class="logo" :src="commodityData.logo"></image>
          <view class="contBox">
            <image class="codeImages" :src="commodityData.qr_code"></image>
            <view class="detailTop">
              <view class="price">
                <view class="ico">¥</view>
                <view>{{ commodityData.discount_price }}</view>
                <view class="group">原价¥{{ commodityData.market_price }}</view>
              </view>
            </view>
            <view class="name">{{ commodityData.title }}</view>
          </view>
        </view>
        <view class="optionDown">
          <button class="cancelBut" @click="cancelFun()">取消</button>
          <button class="saveBut" @click="saveFun()">保存图片到相册</button>
        </view>
      </view> -->
      <view class="shareMorePopupImage">
        <!-- 此处用于展示生成的图片 -->
        <image :src="poster" style="width: 600rpx;height: 800rpx;"></image>
        <!-- 生成图片 -->
        <poster ref="poster" :list="list" background-color="#FFF" :width="600" :height="800"
            @on-success="posterSuccess" @on-error="posterError"></poster>
        <view class="optionDown">
          <button class="cancelBut" @click="cancelFun()">取消</button>
          <button class="saveBut" @click="saveFun()">保存图片到相册</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import { getApi, postApi } from "@/api/index.js"
  import moment from 'moment'
  import Poster from '@/components/zhangyuhao-poster/Poster.vue'
  
	export default {
    components: {
      Poster
    },
		data() {
			return {
        currentIndex: 0,
				title: 'Hello',
        commodityId: '',
        commodityData: '',
        moreTabActive: 1, // 类型(1:商品详情,2:商品实拍,3:资质授权,4:关于售后)
        commodityInfoData: [],
        // 弹框
        showPopup: false,
        goodsSkuData: '',
        getStockNumData: '',
        currentTime: '',
        // 商品分享数据
        shareData: {
          title: '商品标题',
          path: '/pages/product/product?id=商品ID', // 分享的页面路径，包含商品ID参数
          imageUrl: '商品图片地址' // 分享的图片地址
        },
        poster: '',
        list: []
			}
		},
    // 分享事件的处理函数
    onShareAppMessage(res) {
      // 返回分享的内容
      return {
        title: this.shareData.title,
        path: this.shareData.path,
        imageUrl: this.shareData.imageUrl
      };
    },
		onLoad(option) {
		  console.log(option)
		  this.commodityId = option.id
		  uni.setNavigationBarTitle({
		    title: '团品详情' // 设置为你想要显示的标题文本
		  });
      this.currentTime = moment().format('YYYY/MM/DD')
      wx.showShareMenu({
        menus: ['shareAppMessage', 'shareTimeline'] //'shareAppMessage'打开分享好友功能 | 'shareTimeline'打开分享到朋友圈功能
      });
      
		},
		onShow() {
		  this.init()
      this.initType()
		},
		methods: {
      changeSwiper(row){
        console.log(row)
        this.currentIndex = row.detail.current
      },
      formatDate(date) {
				console.log(date)
        return moment(date).format('YYYY/MM/DD') // 格式化日期
      },
      init(){
        let obj={
          id: this.commodityId
        }
        this.loading = true
        postApi('/goods/detail', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            res.data.images = res.data.images ? res.data.images.split("|") : ''
            this.shareData.title = res.data.title
            this.shareData.path = '/pages/detail/detail?id=' + res.data.id
            this.shareData.imageUrl = res.data.logo // 分享的图片地址
            res.data.put_time_image = moment(res.data.put_time).format('MM/DD')
            this.commodityData = res.data
            console.log(this.commodityData)
          }
        }).catch(err => {
          this.loading = false
        })
      },
      initType(){
        let obj={
          goods_id: this.commodityId,
          type: this.moreTabActive
        }
        uni.showLoading({
          title: '加载中'
        })
        postApi('/goods/info', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            uni.hideLoading()
            this.commodityInfoData = res.data
          }
        }).catch(err => {
          this.loading = false
        })
      },
      moreTabActiveFun(){
        this.initType()
      },
      skuClick(){
        console.log('skuClick')
        this.$refs.checkSizePopup.open('bottom')
        postApi('/goods/goodsSku', {
          goods_id: this.commodityId
        }).then(res => {
          if(res.code === 1){
            res.data.forEach((list) => {
              list.checkValue = list.values.length>0 ? list.values[0] : ''
            })
            this.goodsSkuData = res.data
            // 请求库存接口
            this.getStockNumFun()
          }
        }).catch(err => {
          this.loading = false
        })
      },
      skuListClick(sub,index){
        this.goodsSkuData[index].checkValue = sub
        // 请求库存接口
        this.getStockNumFun()
      },
      getStockNumFun(){
        let tempSku = []
        this.goodsSkuData.forEach((list) => {
          tempSku.push(list.checkValue)
        })
        console.log(tempSku)
        postApi('/goods/getStockNum', {
          goods_id: this.commodityId,
          sku: tempSku.join("|")
        }).then(res => {
          if(res.code === 1){
            this.getStockNumData = res.data
          }
        }).catch(err => {
          this.loading = false
        })
      },
      checkSizeClick(){
        this.$refs.contentPopup.open('bottom')
      },
      closedFun(){
        this.$refs.checkSizePopup.close()
        this.$refs.contentPopup.close()
      },
      shareClickFun(){
        this.$refs.sharePopup.open('bottom')
      },
      shareMoreFun(){
        this.$refs.shareMorePopup.open('center')
        this.start()
      },
      cancelFun(){
        this.$refs.shareMorePopup.close()
      },
      downImagesFun(){
        uni.navigateTo({
          url: `/pages/detail/downImages?id=` + this.commodityId
        })
      },
      //生成海报
      posterError(err) {
        console.log(err)
      },
      posterSuccess(url) {
        // 生成成功，会把临时路径在这里返回
        this.poster = url;
        console.log(url)
      },
      start() {
        // 赋值需要渲染的信息
        this.list = [{
            type: 'image',
            // path替换成你自己的图片，注意需要在小程序开发设置中配置域名
            path: this.commodityData.logo,
            x: 0,
            y: 0,
            width: 600,
            height: 600
          },
          {
            type: 'image',
            path: this.commodityData.qr_code,
            textBaseline: 'top',
            x: 420,
            y: 630,
            width: 140,
            height: 140
          },
          {
          	type: 'text',
          	text: '￥' + this.commodityData.discount_price,
            width: 700,
            height: 30,
            x: 20,
            y: 620,
          	size: 26,
            color: '#CFB4A7'
          },
          {
            type: 'textarea',
            width: 360,
            height: '',
            x: 20,
            y: 660,
            text: this.commodityData.title,
            size: 28,
            color: '#000'
          }
        ];
        // 生成图片
        this.$nextTick(() => {
            // 要放在$nextTick()里，不然会空白
            this.$refs.poster.create();
        })
      },
      saveFun(){
        this.saveCanvasToAlbum()
      },
      saveCanvasToAlbum() {
        // 保存图片到相册
        uni.saveImageToPhotosAlbum({
          filePath: this.poster,
          success: () => {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            });
          },
          fail: (err) => {
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            });
          }
        })
      }
    }
	}
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  .banner1{
    position: relative;
    ::v-deep swiper{
      position: relative;
      height: 750rpx;
    }
    .bannerImages1{
      width: 100%;
      height: 750rpx;
      background: #aaa;
    }
    .tips_info{
      position: absolute;
      bottom: 0;
      left: 0px;
      height: 180rpx;
      width: 100%;
      .bg{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 180rpx;
        width: 100%;
        z-index: 8;
      }
      .text{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 138rpx;
        width: 100%;
        z-index: 9;
      }
      .price{
        width: 300rpx;
        text-align: center;
        font-weight: 800;
        font-size: 60rpx;
        color: #000000;
        height: 80rpx;
        color: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
        .symbol{
          font-size: 36rpx;
        }
      }
      .oldPrice{
        padding-top: 16rpx;
        width: 300rpx;
        text-align: center;
        font-weight: normal;
        font-size: 28rpx;
        color: #000000;
        height: 38rpx;
        line-height: 38rpx;
        text-decoration: line-through;
      }
      .openTime{
        position: absolute;
        left: 400rpx;
        bottom: 36rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }
      .residueNum{
        position: absolute;
        left: 400rpx;
        bottom: 10rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #734E48;
      }
    }
  }
  .detailTop{
    padding: 10rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .price{
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      position: relative;
      font-weight: 800;
      font-size: 44rpx;
      color: #000000;
      .ico{
        font-size: 30rpx;
      }
      .group{
        padding-bottom: 4rpx;
        margin-left: 20rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #BA9763;
				text-decoration: line-through;
      }
    }
    .desc{
      font-weight: 500;
      font-size: 24rpx;
      color: #D7D7D7;
    }
  }
  .name{
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }
  .addressBox{
    margin: 20rpx;
    padding: 20rpx;
    background: #F8F8F8;
    border-radius: 26rpx 26rpx 26rpx 26rpx;
    .freight{
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid rgba(112,112,112,0.07);
    }
    .checkSize{
      position: relative;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      .checkImage{
        margin-right: 10rpx;
      }
      .rightImage{
        position: absolute;
        right: 10rpx;
        top: 50%;
      }
    }
  }
  .parameterBox{
    position: relative;
    margin: 20rpx;
    padding: 20rpx;
    background: #F8F8F8;
    border-radius: 26rpx 26rpx 26rpx 26rpx;
    display: flex;
    .rightImage{
      position: absolute;
      right: 20rpx;
      top: 50%;
    }
    .list{
      width: 25%;
      text-align: center;
      padding-top: 20rpx;
      .type{
        margin: 10rpx 0 20rpx 0;
        font-weight: 500;
        font-size: 16rpx;
        color: #000000;
      }
      .name{
        font-weight: bold;
        font-size: 22rpx;
        color: #000000;
      }
    }
  }
  .moreTab{
    margin: 20rpx;
    padding: 28rpx 40rpx;
    background: #F8F8F8;
    border-radius: 26rpx 26rpx 26rpx 26rpx;
    display: flex;
    justify-content: space-between;
    .tab{
      position: relative;
    }
    .active{
      color: #74C4BC;
      &::after{
        content: '';
        position: absolute;
        left: 20%;
        bottom: -20rpx;
        width: 60%;
        height: 4rpx;
        background: #74C4BC;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
      }
      
    }
  }
  .moreCont{
    padding: 20rpx 0 120rpx 0;
    font-size: 0;
    .list{
      .title{
        margin-bottom: 10rpx;
        display: block;
        font-weight: bold;
        font-size: 22rpx;
        color: #000000;
      }
      .viewtopImage{
        position: relative;
        .timeText{
          position: absolute;
          right: 50rpx;
          bottom: 43rpx;
          font-size: 32rpx;
          color: #000;
          font-weight: bold;
					z-index: 2;
        }
      }
      .checkImage{
        width: 100%;
      }
      .checkVideo{
        width: 100%;
      }
    }
  }
  .shareButBox{
    position: fixed;
    bottom: 60rpx;
    left: 0;
    padding: 0 160rpx;
    width: 100%;
    box-sizing: border-box;
    .shareBut{
      background: #CFB4A7;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
.checkSizePopup-content{
  padding: 20rpx 30rpx 80rpx 30rpx;
  background: #fff;
  .price{
    display: flex;
    align-items: flex-end;
    padding-left: 20rpx;
    position: relative;
    font-weight: 800;
    font-size: 44rpx;
    color: #000000;
    .ico{
      position: absolute;
      left: 0px;
      bottom: 6rpx;
      font-size: 30rpx;
    }
    .group{
      padding-bottom: 4rpx;
      margin-left: 20rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #BA9763;
    }
  }
  .colorType{
    margin-top: 24rpx;
    .title{
      margin-bottom: 20rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
    .listType{
      display: flex;
      align-items: center;
      overflow: auto;
      .list{
        margin-right: 10rpx;
        padding: 6rpx;
        background: #F7F7F7;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        .checkImage{
          width: 204rpx;
          height: 200rpx;
          background: #aaa;
        }
        .name{
          text-align: center;
          margin-top: 10rpx;
          font-weight: 500;
          font-size: 20rpx;
          color: #000000;
        }
      }
      .active{
        background: #F8F8F8;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #CFB4A7;
      }
    }
  }
  // .sizeType{
  //   .listType{
  //     .list{
  //       width: 100rpx;
  //       height: 100rpx;
  //       text-align: center;
  //       line-height: 100rpx;
  //       background: #F7F7F7;
  //       border-radius: 20rpx 20rpx 20rpx 20rpx;
  //     }
  //     .active{
  //       width: 100rpx;
  //       height: 100rpx;
  //       background: #F7F7F7;
  //       border-radius: 20rpx 20rpx 20rpx 20rpx;
  //       border: 2rpx solid #000000;
  //     }
  //   }
  // }
  .downText{
    margin: 40rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .text{
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      uni-text{
        margin-left: 10rpx;
        font-weight: 500;
        font-size: 16rpx;
        color: #000000;
        opacity: .4;
      }
    }
    .number{
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
  }
  .closedBut{
    background: #CFB4A7;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
  }
}
.contentTitle{
  padding: 20rpx 0;
  text-align: center;
  background: #fff;
  font-weight: bold;
  font-size: 32rpx;
  color: #000000;
}
.contentPopup-content{
  padding: 20rpx 30rpx 80rpx 30rpx;
  background: #fff;
  .parameterBox{
    margin: 0;
  }
  .contentKeyValue{
    margin: 20rpx 0;
    border: 2rpx solid #F7F7F7;
    .list{
      height: 74rpx;
      line-height: 74rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #F7F7F7;
      .type{
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }
      .name{
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
      }
    }
  }
  .closedBut{
    background: #CFB4A7;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
  }
}
.sharePopup-content{
  background: #FFFFFF;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  padding: 20rpx 20rpx 100rpx 20rpx;
  display: flex;
  align-items: flex-start;
  .listBut{
    position: relative;
    width: 25%;
    text-align: center;
    .checkImage{
      
    }
    .name{
      margin: 12rpx 0 0 0;
      padding: 0;
      display: block;
      text-align: center;
      font-weight: 500;
      font-size: 20rpx;
      color: #000000;
    }
    .wx_shareBut{
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
  }
}
.shareMorePopup-content{
  margin: 58rpx;
  font-size: 0;
  .logo{
    width: 634rpx;
    height: 586rpx;
    background: #aaa;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
  }
  .contBox{
    position: relative;
    background: #fff;
    padding: 20rpx 150rpx 20rpx 20rpx;
    border-radius: 0 0 26rpx 26rpx;
    .codeImages{
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      width: 122rpx;
      height: 122rpx;
    }
    .detailTop{
      padding: 0rpx;
    }
    .name{
      min-height: 72rpx;
      margin: 20rpx 0 0 0;
      padding: 0;
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
    }
  }
  .optionDown{
    margin-top: 20rpx;
    display: flex;
    .cancelBut{
      width: 300rpx;
      height: 80rpx;
      background: #737373;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
    .saveBut{
      width: 300rpx;
      height: 80rpx;
      background: #000000;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
.shareMorePopupImage{
  position: relative;
  .optionDown{
    margin-top: 20rpx;
    display: flex;
    .cancelBut{
      width: 280rpx;
      height: 80rpx;
      background: #737373;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
    .saveBut{
      width: 280rpx;
      height: 80rpx;
      background: #000000;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
</style>
